<template>
  <view class="page">
    <!-- 顶部区域（品牌+设置） -->
    <view class="topbar">
      <text class="brand">PDF 小助手</text>
    </view>

    <!-- 主功能区：3×2 网格 -->
    <view class="grid">
      <view class="grid-item highlight" @tap="goRemoveWatermark">
        <t-icon name="magic" size="28" />
        <text class="grid-title">PDF 去水印</text>
      </view>
      <view class="grid-item" @tap="featureWip('merge')">
        <t-icon name="merge-cells" size="28" />
        <text class="grid-title">PDF 合并</text>
      </view>
      <view class="grid-item" @tap="featureWip('split')">
        <t-icon name="split-cells" size="28" />
        <text class="grid-title">PDF 拆分</text>
      </view>
      <view class="grid-item" @tap="featureWip('compress')">
        <t-icon name="zip" size="28" />
        <text class="grid-title">PDF 压缩</text>
      </view>
      <view class="grid-item" @tap="featureWip('image')">
        <t-icon name="image" size="28" />
        <text class="grid-title">PDF 转图片</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    /**
     * 跳转去水印页面
     */
    goRemoveWatermark() {
      uni.navigateTo({ url: "/pages/watermark/index" });
    },

    /**
     * 未完成功能提示
     */
    featureWip(key) {
      const map = {
        merge: "PDF 合并",
        split: "PDF 拆分",
        compress: "PDF 压缩",
        image: "PDF 转图片",
      };
      const name = map[key] || "功能";
      uni.showToast({ title: `${name}开发中`, icon: "none" });
    },
  },
};
</script>

<style>
.page {
  padding: 24rpx;
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 8rpx;
}
.brand {
  font-size: 40rpx;
  font-weight: 700;
  color: #1f1f1f;
}
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24rpx;
}
.grid-item {
  background: #fff;
  border-radius: 24rpx;
  padding: 40rpx 24rpx;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}
.grid-item.highlight {
  background: linear-gradient(135deg, #ff4d4f 0%, #ff7a45 100%);
  color: #fff;
}
.grid-title {
  font-size: 32rpx;
}
</style>
